{
  "err_no": 0,
  "err_msg": "success",
  "data": {
    "booklet": {
      "booklet_id": "6844723714655780871",
      "base_info": {
        "id": 0,
        "booklet_id": "6844723714655780871",
        "title": "如何使用 Canvas 制作出炫酷的网页背景特效",
        "price": 990,
        "category_id": "6809637767543259144",
        "status": 1,
        "user_id": "1538971967685032",
        "verify_status": 2,
        "summary": "从零开始学习 Canvas 相关知识，分析其特效，最终制作出炫酷的网页背景",
        "cover_img": "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2017/11/20/15fd79563b28dd6e~tplv-t2oaga2asx-image.image",
        "section_count": 9,
        "section_ids": "6844723715192651784|6844723715284926471|6844723715301703693|6844723715301720077|6844723715305897998|6844723715305897992|6844723715305914382|6844723715305930766|6844723715310092296|6844723715310092295",
        "is_finished": 1,
        "ctime": 1510652130,
        "mtime": 1655265315,
        "put_on_time": 1598288820,
        "pull_off_time": 1598288673,
        "finished_time": 1596106628,
        "recycle_bin_time": -62135596800,
        "verify_time": -62135596800,
        "submit_time": 1645414483,
        "top_time": -62135596800,
        "wechat_group_img": "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4eea367219e04d47bcbea342e7b41138~tplv-k3u1fbpfcp-watermark.image?",
        "wechat_group_desc": "四姐",
        "wechat_group_signal": "sunshine1735",
        "read_time": 6174,
        "buy_count": 5153,
        "course_type": 1,
        "background_img": "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ec782591f2245958e68b6c20124801b~tplv-k3u1fbpfcp-watermark.image?",
        "is_distribution": 1,
        "distribution_img": "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f0461ea9c2f4a6bbbe7c761d235923e~tplv-k3u1fbpfcp-zoom-1.image?",
        "commission": 198,
        "can_vip_borrow": true,
        "is_sign": false
      },
      "reading_progress": {
        "id": 0,
        "booklet_id": "6844723714655780871",
        "user_id": "3210229681503629",
        "status": 1,
        "buy_type": 1,
        "reading_end": 0,
        "reading_progress": 0,
        "last_section_id": "0",
        "has_update": 1,
        "last_rtime": 1516412390,
        "ctime": 1516412390,
        "mtime": 1658225235,
        "valid_begin_time": 0,
        "valid_end_time": 0,
        "borrow_times": 0
      },
      "user_info": {
        "user_id": "1538971967685032",
        "user_name": "sunshine小小倩",
        "company": "饿了么",
        "job_title": "资深前端工程师",
        "avatar_large": "https://p3-passport.byteacctimg.com/img/user-avatar/bb68979f992ac426cbd75574d25702ab~300x300.image",
        "level": 6,
        "description": "",
        "followee_count": 65,
        "follower_count": 18454,
        "post_article_count": 44,
        "digg_article_count": 516,
        "got_digg_count": 20402,
        "got_view_count": 834867,
        "post_shortmsg_count": 6,
        "digg_shortmsg_count": 19,
        "isfollowed": false,
        "favorable_author": 1,
        "power": 28657,
        "study_point": 0,
        "university": {
          "university_id": "0",
          "name": "",
          "logo": ""
        },
        "major": {
          "major_id": "0",
          "parent_id": "0",
          "name": ""
        },
        "student_status": 0,
        "select_event_count": 0,
        "select_online_course_count": 0,
        "identity": 0,
        "is_select_annual": true,
        "select_annual_rank": 0,
        "annual_list_type": 0,
        "extraMap": {},
        "is_logout": 0,
        "annual_info": [],
        "account_amount": 0,
        "user_growth_info": {
          "user_id": 1538971967685032,
          "jpower": 0,
          "jscore": 799.1,
          "jpower_level": 0,
          "jscore_level": 5,
          "jscore_title": "先锋掘友",
          "author_achievement_list": [],
          "vip_level": 0,
          "vip_title": ""
        },
        "is_vip": false
      },
      "event_discount": null,
      "is_buy": true,
      "section_updated_count": 9,
      "is_new": false
    },
    "introduction": {
      "id": 80791,
      "section_id": "6844723715192651784",
      "title": "介绍",
      "user_id": "1538971967685032",
      "booklet_id": "6844723714655780871",
      "status": 1,
      "content": "<h2>小册简介</h2>\n<p>你可能会看到这样的效果：\n<img src=\"https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2017/11/15/15fbdb605b34a9e7~tplv-t2oaga2asx-image.image\" alt=\"知乎登录背景\"></p>\n<p>又或者这样的：\n<img src=\"https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2017/11/15/15fbdb6d03861530~tplv-t2oaga2asx-image.image\" alt=\"QQPC介绍页面\"></p>\n<p>还可能是这样的：\n<img src=\"https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2017/11/15/15fbdba8bc88ca28~tplv-t2oaga2asx-image.image\" alt=\"http://cherryblog.site/\"></p>\n<p>笔者博客地址：<a href=\"http://cherryblog.site/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">cherryblog.site</a> ٩(๑>◡&#x3C;๑)۶</p>\n<p>你是不是被上面几个例子中的背景所吸引，很好奇这些背景是怎么实现的？是否也想让自己的个人网站有同样炫酷且与众不同的背景呢？</p>\n<p>本小册将会帮你解答这个问题：如何使用 Canvas 制作出炫酷的网页背景特效。</p>\n<p>你可能好奇这种效果是怎么做到的呢？其实答案很简单，就是 HTML5 的新标签 —— Canvas。</p>\n<p>Canvas 自 HTML5 发布以来就受到了广泛的关注，但却很少在项目中使用，所以大部分前端攻城狮都只是知道，很少实践。</p>\n<p>本小册将带你进入 Canvas 的世界，为你展示 30+ 个 Canvas 项目，你会惊叹于 Canvas 所制作出的神奇效果。</p>\n<p>同时会带大家从零开始学习 Canvas：从零开始，教你绘制出基本图形。通过组合这些基本图形，将产生不可思议的化学反应~</p>\n<p>在入门了 Canvas 之后，将带大家分析那些可以作为背景的 Canvas 炫酷特效，总结出这些炫酷特效都有哪些特点。日后这些就是你的思想武器。掌握了这些规律，你就相当于站在了巨人的肩膀上，再制作炫酷的网页背景特效将会事半功倍。</p>\n<p>在了解了这些特点之后，我们将通过一个具体的案例来一起实现一下这些特效。</p>\n<p>最终， Canvas 基础知识 + 特效特点 + 你丰富的想象力 = 属于你自己的炫酷网页背景特效。</p>\n<p><strong>划重点：本小册的所有特效，都会将源码分享给大家~ (｡♥‿♥｡)</strong></p>\n<h3>你会学到什么？</h3>\n<ul>\n<li>了解基本的 Canvas API</li>\n<li>使用 Canvas 绘制基本图形和特效</li>\n<li>了解 Canvas 常见特效的“套路”</li>\n<li>制作出属于你自己的 Canvas 背景特效</li>\n</ul>\n<h3>你应该已经了解什么？</h3>\n<ul>\n<li>一定的前端基础（包括但不限于 HTML5、CSS3、JavaScript）；</li>\n<li>一丢丢的数学知识（高数能及格的水平就好）~</li>\n</ul>\n<h3>你需要准备什么？</h3>\n<ul>\n<li>一台电脑</li>\n<li>一颗认真学习的心</li>\n<li>一杯咖啡</li>\n</ul>\n<h2>购买须知</h2>\n<ol>\n<li>本小册为图文形式内容服务，共计 9 节，上线时间为 2017 年 11 月 22 日；</li>\n<li>购买用户可享有小册永久的阅读权限；</li>\n<li>购买用户可进入小册微信群，与作者互动；</li>\n<li>掘金小册为虚拟内容服务，一经购买成功概不退款；</li>\n<li>掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；</li>\n<li>在掘金小册阅读过程中，如有任何问题，请邮件联系 <a href=\"mailto:xiaoce@xitu.io\">xiaoce@xitu.io</a></li>\n</ol>",
      "draft_content": "",
      "draft_title": "介绍",
      "markdown_content": "",
      "markdown_show": "",
      "is_free": 1,
      "read_time": 164,
      "read_count": 0,
      "comment_count": 0,
      "ctime": 1510652130,
      "mtime": 1536053333,
      "is_update": 0,
      "draft_read_time": 0,
      "vid": "",
      "reading_progress": null
    },
    "sections": [
      {
        "id": 74386,
        "section_id": "6844723715284926471",
        "title": "什么是 Canvas ",
        "user_id": "1538971967685032",
        "booklet_id": "6844723714655780871",
        "status": 1,
        "content": "",
        "draft_content": "",
        "draft_title": "什么是 Canvas ",
        "markdown_content": "",
        "markdown_show": "",
        "is_free": 1,
        "read_time": 312,
        "read_count": 10926,
        "comment_count": 80,
        "ctime": 1510652130,
        "mtime": 1584614919,
        "is_update": 0,
        "draft_read_time": 0,
        "vid": "",
        "reading_progress": null
      },
      {
        "id": 74404,
        "section_id": "6844723715301703693",
        "title": "Canvas 的应用场景",
        "user_id": "1538971967685032",
        "booklet_id": "6844723714655780871",
        "status": 1,
        "content": "",
        "draft_content": "",
        "draft_title": "Canvas 的应用场景",
        "markdown_content": "",
        "markdown_show": "",
        "is_free": 1,
        "read_time": 498,
        "read_count": 7986,
        "comment_count": 40,
        "ctime": 1510726184,
        "mtime": 1589594549,
        "is_update": 0,
        "draft_read_time": 0,
        "vid": "",
        "reading_progress": null
      },
      {
        "id": 74400,
        "section_id": "6844723715301720077",
        "title": "手摸手带你入门 Canvas",
        "user_id": "1538971967685032",
        "booklet_id": "6844723714655780871",
        "status": 1,
        "content": "",
        "draft_content": "",
        "draft_title": "手摸手带你入门 Canvas",
        "markdown_content": "",
        "markdown_show": "",
        "is_free": 0,
        "read_time": 2939,
        "read_count": 7703,
        "comment_count": 62,
        "ctime": 1510723630,
        "mtime": 1589442277,
        "is_update": 0,
        "draft_read_time": 0,
        "vid": "",
        "reading_progress": null
      },
      {
        "id": 74405,
        "section_id": "6844723715305897998",
        "title": "炫酷背景特效的通性",
        "user_id": "1538971967685032",
        "booklet_id": "6844723714655780871",
        "status": 1,
        "content": "",
        "draft_content": "",
        "draft_title": "炫酷背景特效的通性",
        "markdown_content": "",
        "markdown_show": "",
        "is_free": 0,
        "read_time": 326,
        "read_count": 3972,
        "comment_count": 19,
        "ctime": 1510727440,
        "mtime": 1589921980,
        "is_update": 0,
        "draft_read_time": 0,
        "vid": "",
        "reading_progress": null
      },
      {
        "id": 74407,
        "section_id": "6844723715305897992",
        "title": "怎么实现随机粒子",
        "user_id": "1538971967685032",
        "booklet_id": "6844723714655780871",
        "status": 1,
        "content": "",
        "draft_content": "",
        "draft_title": "怎么实现随机粒子",
        "markdown_content": "",
        "markdown_show": "",
        "is_free": 0,
        "read_time": 430,
        "read_count": 3532,
        "comment_count": 49,
        "ctime": 1510727987,
        "mtime": 1590716228,
        "is_update": 0,
        "draft_read_time": 0,
        "vid": "",
        "reading_progress": null
      },
      {
        "id": 74409,
        "section_id": "6844723715305914382",
        "title": "使你的随机粒子动起来",
        "user_id": "1538971967685032",
        "booklet_id": "6844723714655780871",
        "status": 1,
        "content": "",
        "draft_content": "",
        "draft_title": "使你的随机粒子动起来",
        "markdown_content": "",
        "markdown_show": "",
        "is_free": 0,
        "read_time": 409,
        "read_count": 2952,
        "comment_count": 13,
        "ctime": 1510728140,
        "mtime": 1576165038,
        "is_update": 0,
        "draft_read_time": 0,
        "vid": "",
        "reading_progress": null
      },
      {
        "id": 74408,
        "section_id": "6844723715305930766",
        "title": "使你的鼠标和屏幕互动",
        "user_id": "1538971967685032",
        "booklet_id": "6844723714655780871",
        "status": 1,
        "content": "",
        "draft_content": "",
        "draft_title": "使你的鼠标和屏幕互动",
        "markdown_content": "",
        "markdown_show": "",
        "is_free": 0,
        "read_time": 530,
        "read_count": 2971,
        "comment_count": 26,
        "ctime": 1510728085,
        "mtime": 1595471586,
        "is_update": 0,
        "draft_read_time": 0,
        "vid": "",
        "reading_progress": null
      },
      {
        "id": 74406,
        "section_id": "6844723715310092296",
        "title": "制作属于你自己的特效",
        "user_id": "1538971967685032",
        "booklet_id": "6844723714655780871",
        "status": 1,
        "content": "",
        "draft_content": "",
        "draft_title": "制作属于你自己的特效",
        "markdown_content": "",
        "markdown_show": "",
        "is_free": 0,
        "read_time": 92,
        "read_count": 2372,
        "comment_count": 2,
        "ctime": 1510727552,
        "mtime": 1526785076,
        "is_update": 0,
        "draft_read_time": 0,
        "vid": "",
        "reading_progress": null
      },
      {
        "id": 74402,
        "section_id": "6844723715310092295",
        "title": "使你的 Canvas 更加优雅",
        "user_id": "1538971967685032",
        "booklet_id": "6844723714655780871",
        "status": 1,
        "content": "",
        "draft_content": "",
        "draft_title": "使你的 Canvas 更加优雅",
        "markdown_content": "",
        "markdown_show": "",
        "is_free": 0,
        "read_time": 528,
        "read_count": 2400,
        "comment_count": 30,
        "ctime": 1510723682,
        "mtime": 1592809050,
        "is_update": 0,
        "draft_read_time": 0,
        "vid": "",
        "reading_progress": null
      }
    ]
  }
}